<!-- 通信类 决算  实际时间表 -->
<template>
  <TCollapse title="实际时间表">
    <div ref="queryFormBox" class="search-flex-box">
      <Form ref="formRef" v-model="actualTimeList" :form-option="formOption" :select-list="dicLists" @handleEvent="changeDate"/>
    </div>
  </TCollapse>
</template>

<script>

import Form from '@/views/actualBudget/communication/tFbusiness/pmsForm'
import TCollapse from '@/components/basic/TCollapse.vue'
import {
    updateTime
} from '@/api/actualBudget/tFbusiness'
// 查询条件配置
const formOption = {
    size: 'mini',
    inline: true,
    labelWidth: '160px',
    itemData: [
        {
            type: 'input',
            prop: 'realStartTime',
            value: '',
            width: '',
            colSpan: 6,
            clearable: true,
            disabled: true,
            label: '实际开工时间'
        },
        {
            type: 'input',
            prop: 'realEndTime',
            value: '',
            width: '',
            colSpan: 6,
            clearable: true,
            disabled: true,
            label: '实际完工时间'
        },
        {
            type: 'input',
            prop: 'endInternalAcceptDate',
            value: '',
            width: '',
            colSpan: 6,
            clearable: true,
            disabled: true,
            label: '内部验收时间'
        },
        {
            type: 'input',
            prop: 'jiaofuApplicationDate',
            value: '',
            width: '',
            colSpan: 6,
            clearable: true,
            disabled: true,
            label: '交付验收时间'
        },
    ]
}

export default {
    name: 'ActualTime',
    components: {
        Form,
        TCollapse
    },
    props: {
        actualTimeList: {
            type: Object,
            default: () => ({})
        },
        urlList: {
            type: Object,
            default: () => ({})
        },
        lcList: {
            type: Object,
            default: () => ({})
        },
        tableData: {
            type: Array,
            default: () => []
        },
        basicList:{
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            formOption, // 查询条件配置项
            dialogCheckbox: false, // 自定义列表弹框
            dicLists: {} // 下拉框字典选项集合
        }
    },
    computed: {
        newPrjDetail() {
            return {
                basicPrjDetail: this.basicList,
                basictableData: this.tableData
            }
        },
    },
    watch:{
        newPrjDetail:{
            handler(val){
                const { basicPrjDetail, basictableData } = val
                if (['03','05'].includes(basicPrjDetail.manageMode) && basictableData?.length > 0) {
                    this.getInitFormOption()
                }
                if(basicPrjDetail?.manageMode !== '03'){
                    this.getInitFormOption()
                }
            },
            deep:true,
            immediate:true
        }
    },
    methods: {
        async changeDate(prop, value) {
            const { basicPrjDetail } = this.newPrjDetail
            const params = {
                prjId: basicPrjDetail.prjId,
                rentableOperateTime: value
            }
            const { code } = await updateTime(params)
            if (+code === 200) {
                this.$message.success('保存成功')
            }
        },
        getInitFormOption() {
            const { basicPrjDetail } = this.newPrjDetail
            const objs = {
                type: 'datePicker',
                prop: 'rentableOperateTime',
                dateType: 'date',
                value: '',
                width: '',
                colSpan: 6,
                label: '具备可起租条件',
                clearable: true,
                disabled: this.$route.query.type !== 'todo',
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd'
            }
            if (this.isShowForm() && basicPrjDetail.isNewbusiness === '1') {
                this.formOption.itemData.push(objs)
                const uniqueArr = this.formOption.itemData.reduce((acc, cur) => {
                    if (!acc.some(item => item.prop === "rentableOperateTime")) {
                        acc.push(cur);
                    }
                    return acc;
                }, []);
                this.formOption.itemData = uniqueArr
            }
        },
        isShowForm() {
            const { basicPrjDetail, basictableData } = this.newPrjDetail
            let showFlag = false
            const projectType = ['Q', 'W']
            
            if (basicPrjDetail.manageMode === '01') {
                showFlag = !(projectType.includes(basicPrjDetail.prjType))
            }
            if (['03','05'].includes(basicPrjDetail.manageMode)) {
                showFlag = +basicPrjDetail.ifNewstartupProcess === 0 || !(projectType.includes(basictableData[0]?.prjType))
            }
            return showFlag
        }
    },
}
</script>

<style lang="scss" scoped>
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}

.searchBtn {
    width: 100px;
    margin-left: auto;
    display: flex;
    margin-top: 4px;
    flex-direction: column;

    .el-button+.el-button {
        margin-left: 0;
        margin-top: 8px;
    }
}

.electronicSignature {
    width: 100%;

    .mainDetails {
        padding: 20px 25px 0px;
    }

    .topRemark {
        // background-color: #fdf5e6;
        background-color: #ffefd5;
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-size: 14px;

        .asterisk {
            color: #f00;
            margin-right: 2px;
            font-size: 18px;
        }
    }

    .customBtn {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        margin: 10px 20px 10px 90%;
        cursor: pointer;

        .el-icon-s-tools {
            font-size: 20px;
            color: #999;
            margin-right: 6px;
        }
    }
}

.el-button--text {
    color: #02A7F0;
}

.el-button--primary {
    color: #fff;
}

.dialog-footer {
    display: flex;
    justify-content: center;
}

::v-deep .el-button+.el-button {
    color: #fff;
}

// 弹框样式
::v-deep .el-dialog__body {
    max-height: 400px;
    overflow-y: auto;
    margin: 0px;
}

// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
    // 滚动条整体样式
    width: 6px; //高宽分别对应横竖滚动条的尺寸
    height: 10px;
}

::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
    // 滚动条里面小方块
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #f2f3f5;
}

::v-deep .el-range-editor.el-input__inner {
    padding: 0px 10px;
}

.topBtn {
    text-align: center;
    padding: 20px;
}

::v-deep .el-tag {
    border: none;
    color: #02A7F0;
    background-color: #FFFFFF;
}

::v-deep .el-dialog__title {
    font-size: 14px;
    font-weight: bold;
}

::v-deep .el-col-24 {
    height: 110px;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #f7f7f7;
}
</style>
